<template>
    <div>
        <!-- 顶部滑动条区域 -->
        <div id="slider" class="mui-slider">
          <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
              <a :class="['mui-control-item', item.id == 0 ? 'mui-active' : '']" v-for="item in cates" :key="item.id" @tap="getPhotoListByCateId(item.id)">
                {{ item.title }}
              </a>

            </div>
          </div>
        </div>
    </div>
</template>
<script>
import mui from '../../lib/mui/js/mui.min'

export default {
    data(){
        return {
            cates: []
        }
    },
    created(){
        this.getAllCate()
    },
    mounted(){
        mui(".mui-scroll-wrapper").scroll({
          deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
    },
    methods:{
        getAllCate(){
            this.$http.get(this.$api + "/photo/imgCate","get").then(res =>{
                console.log(res)
                this.cates = res.data.message
                let obj = {
                    id: '00',
                    title: '全部'
                }
                this.cates.unshift(obj)
            })
        },
        getPhotoListByCateId(){}
    }
}
</script>
<style lang="scss" scoped>
 * { touch-action: pan-y; }
.mui-active {
    color: #007aff;
}

</style>
